<template>
    <div class="box">
        <!-- 一行一个 -->
        <div
            class="square"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx'
            }"
            v-if="contentList.tabs == 1 && !contentList.imgList.length && !props.isUniapp">
            <div class="item one" v-for="item in num" :key="item">
                <div class="search_contain one_search">
                    <div class="search_img"><img src="../../assets/mall/empty1.png" mode="aspectFill" /></div>
                    <div class="serch_all">
                        <span class="search_name">这里显示商品名称，最多显示2行</span>
                        <div class="search_row">
                            <div class="search_money">
                                <text>￥</text>
                                <text class="price">{{ priceNum(990, 0) }}</text>
                                <text v-if="priceNum(990, 1)">.{{ priceNum(990, 1) }} </text>
                                <text class="price-qi"> 起 </text>
                            </div>
                            <div class="shop-cart"><image class="search_icon" src="../../assets/mall/cart.png" /></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="square"
            v-if="contentList.tabs == 1 && contentList.imgList.length"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx'
            }">
            <div class="item one" v-for="item in contentList.imgList" :key="item" @click="jump(item)">
                <div class="search_contain one_search">
                    <div class="search_img">
                        <GoodImgStatus v-if="item.onSale == 3" />
                        <image
                            class="search_sigle"
                            webp
                            :src="getOssImg((item.materialSrc || [])[0]?.materialSrc) || defaultImg"
                            mode="aspectFill"></image>
                    </div>
                    <div class="serch_all">
                        <span :class="[item?.activityProgress == 1 ? 'shop-logo search_name' : 'search_name']">{{
                            item.goodsName
                        }}</span>
                        <div class="search_row">
                            <div class="search_money">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div class="shop-cart">
                                <!-- onSale:1:上架、2:下架（仓库）、3 售罄 -->
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="search_icon"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="search_icon" src="../../assets/mall/cart_disabled.png" />
                                <div class="shop-cart-num" @click.stop="addCart(item)" v-if="item.num">
                                    {{ item.num <= 99 ? item.num : '99+' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 一行两个 -->
        <div
            class="square"
            v-if="contentList.tabs == '2' && contentList.imgList.length"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx'
            }">
            <div class="item" style="background: none">
                <!-- <div v-for="item in contentList.imgList" :key="item" class="bottom_space"> -->
                <div v-for="item in allData.firstColumn_two" :key="item" class="bottom_space">
                    <div class="common" @click="jump(item)">
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.materialSrc[0].materialSrc) || defaultImg"
                            class="hotitem_img"></image>
                        <GoodImgStatus :isSmall="false" v-if="item.onSale == 3" />
                    </div>

                    <div class="hotitem_detail" @click="jump(item)">
                        <div :class="[item?.activityProgress == 1 ? 'shop-logo hotitem_name' : 'hotitem_name']">
                            {{ item.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div>
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="hotitem_car" src="../../assets/mall/cart_disabled.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" style="background: none">
                <div v-for="item in allData.twoColumn_two" :key="item" class="bottom_space">
                    <div class="common" @click="jump(item)">
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.materialSrc[0].materialSrc) || defaultImg"
                            class="hotitem_img"></image>
                        <GoodImgStatus v-if="item.onSale == 3" :isSmall="false" />
                    </div>

                    <div class="hotitem_detail" @click="jump(item)">
                        <div :class="[item?.activityProgress == 1 ? 'shop-logo hotitem_name' : 'hotitem_name']">
                            {{ item.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div>
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="hotitem_car" src="../../assets/mall/cart_disabled.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="square"
            v-if="contentList.tabs == '2' && !contentList.imgList.length && !props.isUniapp"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx'
            }">
            <div class="item" v-for="item in contentList.imgList.length ? contentList.imgList.length : 2" :key="item">
                <div class="no_icon"><img src="../../assets/mall/empty2.png" /></div>
                <div class="hotitem_detail">
                    <div class="hotitem_name">这里显示商品名称，最多显示2行</div>
                    <div class="hotitem_count">
                        <div class="hotitem_text">
                            <text>￥</text>
                            <text class="price">{{ priceNum(990, 0) }}</text>
                            <text v-if="priceNum(990, 1)">.{{ priceNum(990, 1) }} </text>
                            <text class="price-qi"> 起 </text>
                        </div>
                        <image class="hotitem_car" src="../../assets/mall/cart.png" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 一行三个 -->
        <div
            class="square"
            v-if="contentList.tabs == '3' && contentList.imgList.length"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx'
            }">
            <div class="item third" style="background: none">
                <!-- <div v-for="item in contentList.imgList" :key="item" class="bottom_space"> -->
                <div v-for="item in allData.firstColumn_three" :key="item" class="bottom_space">
                    <div class="common" @click="jump(item)">
                        <GoodImgStatus v-if="item.onSale == 3" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.materialSrc[0].materialSrc) || defaultImg"
                            class="hotitem_img third-img"></image>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div
                            :class="[
                                item?.activityProgress == 1
                                    ? 'shop-logo hotitem_name third_name'
                                    : 'hotitem_name third_name'
                            ]">
                            {{ item.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div>
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="hotitem_car" src="../../assets/mall/cart_disabled.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item third" style="background: none">
                <div v-for="item in allData.twoColumn_three" :key="item" class="bottom_space">
                    <div class="common" @click="jump(item)">
                        <GoodImgStatus v-if="item.onSale == 3" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.materialSrc[0].materialSrc) || defaultImg"
                            class="hotitem_img third-img"></image>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div
                            :class="[
                                item?.activityProgress == 1
                                    ? 'shop-logo hotitem_name third_name'
                                    : 'hotitem_name third_name'
                            ]">
                            {{ item.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div>
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="hotitem_car" src="../../assets/mall/cart_disabled.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item third" style="background: none">
                <div v-for="item in allData.threeColumn_three" :key="item" class="bottom_space">
                    <div class="common" @click="jump(item)">
                        <GoodImgStatus v-if="item.onSale == 3" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.materialSrc[0].materialSrc) || defaultImg"
                            class="hotitem_img third-img"></image>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div
                            :class="[
                                item?.activityProgress == 1
                                    ? 'shop-logo hotitem_name third_name'
                                    : 'hotitem_name third_name'
                            ]">
                            {{ item.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div>
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="hotitem_car" src="../../assets/mall/cart_disabled.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="square"
            v-if="contentList.tabs == '3' && !contentList.imgList.length && !props.isUniapp"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx'
            }">
            <div
                class="item third"
                v-for="item in contentList.imgList.length ? contentList.imgList.length : Number(contentList.tabs)"
                :key="item">
                <div class="no_icon" style="height: 218rpx"><img src="../../assets/mall/empty1.png" /></div>
                <div class="hotitem_detail third_detail">
                    <div class="hotitem_name third_name">这里显示商品名称，最多显示2行</div>
                    <div class="hotitem_count">
                        <div class="hotitem_text">
                            <text>￥</text>
                            <text class="price">{{ priceNum(990, 0) }}</text>
                            <text v-if="priceNum(990, 1)">.{{ priceNum(990, 0) }} </text>
                            <text class="price-qi"> 起 </text>
                        </div>
                        <image class="hotitem_car" src="../../assets/mall/cart.png" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 滑动 -->
        <div
            v-if="contentList.tabs == '4' && contentList.imgList.length"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx',
                width: '100%'
            }">
            <scroll-view scroll-x="true" class="scroll-view_H">
                <div class="item four" v-for="item in contentList.imgList" :key="item">
                    <div class="common" @click="jump(item)">
                        <GoodImgStatus :isSmall="false" v-if="item.onSale == 3" />
                        <image
                            webp
                            :src="getOssImg(item.materialSrc[0].materialSrc) || defaultImg"
                            class="hotitem_img four-img"
                            mode="aspectFill"></image>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div
                            style="height: 68rpx"
                            :class="[
                                item?.activityProgress == 1
                                    ? 'shop-logo hotitem_name third_name'
                                    : 'hotitem_name third_name'
                            ]">
                            {{ item.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <div>
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                                <image v-else class="hotitem_car" src="../../assets/mall/cart_disabled.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </scroll-view>
        </div>
        <div
            v-if="contentList.tabs == '4' && !contentList.imgList.length && !props.isUniapp"
            :style="{
                'margin-bottom': contentList
                    ? contentList.space
                        ? contentList.space * 2 + 'rpx'
                        : 0 + 'rpx'
                    : 0 + 'rpx',
                width: '100%'
            }">
            <scroll-view scroll-x="true" @scroll="scroll" class="scroll-view_H">
                <div
                    class="item four"
                    v-for="item in contentList.imgList.length ? contentList.imgList : Number(contentList.tabs)"
                    :key="item">
                    <div class="no_icon" style="height: 290rpx"><img src="../../assets/mall/empty2.png" /></div>

                    <div class="hotitem_detail third_detail">
                        <div class="hotitem_name third_name">这里显示商品名称，最多显示2行</div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(990, 0) }}</text>
                                <text v-if="priceNum(990, 1)">.{{ priceNum(990, 1) }} </text>
                                <text class="price-qi" v-if="item.goodsMinPrice !== item.goodsMaxPrice"> 起 </text>
                            </div>
                            <image class="hotitem_car" src="../../assets/mall/cart.png" />
                        </div>
                    </div>
                </div>
            </scroll-view>
        </div>
    </div>
</template>
<script setup name="product">
import { floatDivide, getOssImg } from '../../commons/utils.js';
import { ref, watch, reactive } from 'vue';
import defaultImg from '../../assets/mall/errorImg.png';
import GoodImgStatus from '../../components/imgStatus/index.vue';

const emit = defineEmits(['jump', 'addCart']);
const allData = reactive({
    firstColumn_two: [],
    twoColumn_two: [],
    firstColumn_three: [],
    twoColumn_three: [],
    threeColumn_three: []
});
const num = ref(1);
const imgList = ref([]);
const columnData = ref([]);
let props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
let contentList = reactive({});
const jump = item => {
    if (props.isUniapp) {
        emit('jump', item);
    }
};
const addCart = item => {
    if (props.isUniapp) {
        emit('addCart', { data: item });
    }
};
const priceNum = (amount, index) => {
    let price = floatDivide(amount, 100);
    let list = [];
    try {
        list = price.toString().split('.');
    } catch (e) {
        list = [Number(price)];
    }
    return list[index];
};
const getcolumn = (index, column, flag) => {
    if (flag) {
        imgList.value = JSON.parse(JSON.stringify(contentList.imgList));
        columnData.value = [];
    }
    if (Object.keys(contentList).length) {
        var spliceCurrent = imgList.value.splice(0, column);
        spliceCurrent[index] ? columnData.value.push(spliceCurrent[index]) : '';
        if (imgList.value.length) {
            getcolumn(index, column, false);
        }
        return columnData.value;
    }
};
watch(
    () => props.options,
    val => {
        if (Object.keys(val).length) {
            let data = JSON.parse(JSON.stringify(val));
            Object.assign(contentList, data);
            //下架商品预览不展示
            contentList.imgList = contentList.imgList.filter(item => item.onSale != 2);
            if (val.tabs == 2) {
                allData.firstColumn_two = getcolumn(0, 2, true);
                allData.twoColumn_two = getcolumn(1, 2, true);
            }
            if (val.tabs == 3) {
                allData.firstColumn_three = getcolumn(0, 3, true);
                allData.twoColumn_three = getcolumn(1, 3, true);
                allData.threeColumn_three = getcolumn(2, 3, true);
            }
        }
    },
    { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.scroll-view_H {
    white-space: nowrap;
    width: calc(100% - 27rpx);
    padding: 8rpx 16rpx 0 11rpx;
}
.shop-logo::before {
    width: 55rpx;
    height: 33rpx;
    margin-right: 6rpx;
    padding: 4rpx;
    content: '满减';
    text-align: center;
    color: #ffffff;
    border-radius: 4rpx;
    background: #fe292b;
    font-family: PingFangSC-Medium, PingFang SC;
    font-size: 22rpx;
    font-weight: 500;
    line-height: 33rpx;
}
.box {
    display: flex;
    flex-wrap: wrap;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    .square {
        width: 100%;
        margin: 0 10rpx;
        display: flex;
        flex-wrap: wrap;
    }
    .common {
        position: relative;
    }
    .third {
        width: calc(33.3% - 16rpx) !important;
    }
    .four {
        width: 290rpx !important;
        display: inline-block;
    }
    .one {
        width: calc(100% - 20rpx) !important;
        border-radius: 0 !important;
        &:last-child .one_search {
            border-bottom: none;
        }
    }
    .item {
        width: calc(50% - 16rpx);
        margin: 0 8rpx 0 8rpx;
        flex-shrink: 0;
        border-radius: 16rpx;
        background-color: #fff;
        .one_search {
            margin: 0 22rpx;
            border-bottom: 2rpx solid #f5f5f5;
            padding: 32rpx 0 !important;
        }
        .bottom_space {
            margin-bottom: 20rpx;
            background-color: #fff;
            border-radius: 16rpx;
        }
        .no_icon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 372rpx;
            background-color: #f2f2f2;
        }
        .search_contain {
            display: flex;
            padding: 24rpx 24rpx 18rpx 24rpx;
            .search_img {
                position: relative;
                width: 240rpx;
                height: 240rpx;
                margin-right: 18rpx;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f2f2f2;
                .search_sigle {
                    width: 100%;
                    height: 100%;
                    border-radius: 16rpx;
                }
            }
            .serch_all {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: calc(100% - 162rpx);
                .search_name {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #33302d;
                    line-height: 36rpx;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .search_row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .shop-cart {
                        position: relative;
                        .shop-cart-num {
                            position: absolute;
                            top: -8rpx;
                            right: -2rpx;
                            width: 25rpx;
                            height: 25rpx;
                            color: #fe292b;
                            font-size: 22rpx;
                            line-height: 24rpx;
                            font-weight: 400;
                            text-align: center;
                            background: #ffffff;
                            border-radius: 50%;
                            border: 2rrpx solid #fe292b;
                        }
                        .search_icon {
                            width: 54rpx;
                            height: 54rpx;
                        }
                    }

                    .search_money {
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-size: 24rpx;
                        font-weight: 600;
                        color: #fe292b;
                        line-height: 40rpx;
                        .price {
                            font-size: 36rpx;
                        }
                        .price-qi {
                            font-weight: 400;
                        }
                    }
                }
            }
        }
        .hotitem_img {
            width: 100%;
            height: 336rpx;
            border-radius: 16rpx 16rpx 0 0;
            background: #f2f2f2;
        }
        .four-img {
            height: 290rpx !important;
        }
        .third-img {
            height: 218rpx !important;
        }
        .third_detail {
            padding: 24rpx 22rpx !important;
        }
        .hotitem_detail {
            padding: 26rpx 22rpx;
            background-color: #fff;
            border-radius: 0 0 16rpx 16rpx;
            .third_name {
                font-size: 28rpx !important;
            }
            .hotitem_name {
                font-size: 32rpx;
                font-weight: 500;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .third_count {
                margin-top: 20rpx;
            }
            .hotitem_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20rpx;
                .hotitem_car {
                    width: 54rpx;
                    height: 54rpx;
                }
                .hotitem_text {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #fe292b;
                    font-family: PingFangSC-Medium, PingFang SC;
                    line-height: 32rpx;
                    .price {
                        font-size: 36rpx;
                    }
                    .price-qi {
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>
